<template>
	<view>
		<uni-titles :title="'学农技'" :backicon="false"></uni-titles>
		<view class="uni-margin-wrap mar-top20">
			<uni-swiper-dot :info="swiperData" :current="current" :mode="mode" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex" circular autoplay :interval="interval" :duration="duration">
					<swiper-item class="swiperItem" @click="swiperItem(index)" v-for="(d, index) in swiperData" :key="d + index">
						<u--image :mode="'aspectFill'" :src="d.img" width="100%" height="400rpx" :radius="'12rpx'"></u--image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<uni-serchs @search="search"></uni-serchs>
		<view class="listbox">
			<view class="item" v-for="(d, index) in listData" :key="d.id">
				<u--image :mode="'aspectFill'" :src="d.pic" width="110rpx" height="110rpx"></u--image>
				<view class="texts">
					<view class="name fs-28">{{ d.title }}</view>
					<view class="time fs-24">
						<text>2022-12-23</text>
						<text class="look">{{ d.hot }}</text>
						<!-- <text class="look">{{ d.hot }}人阅读</text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			interval: 2000,
			duration: 500,
			swiperDotIndex: 0,
			current: 0,
			mode: 'round',
			swiperData: [
				{
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				},
				{
					img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
				}
			],
			listData: [
				// {
				// 	img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
				// 	name: '农业农村部部署安排早稻后双抢工',
				// 	time: '2022-12-23',
				// 	look: '65',
				// 	id: 1
				// },
				// {
				// 	img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
				// 	name: '农业农村部部署安排早稻后双抢工作抢工作抢工作抢工作',
				// 	time: '2022-12-22',
				// 	look: '89',
				// 	id: 2
				// },
				// {
				// 	img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
				// 	name: '农业农村部部署安排早稻后',
				// 	time: '2022-12-15',
				// 	look: '25',
				// 	id: 3
				// }
			],
			dotsStyles: {
				backgroundColor: '#C9C9C9',
				border: '1px rgba(215, 215, 220,0.3) solid',
				selectedBackgroundColor: '#07C160',
				selectedBorder: '1px #07C160 solid'
			},
		};
	},
	mounted() {
		this.name();
	},
	methods: {
		name() {
			let parms = {
				type: 'zhihuHot',
				aaa: 3
			};
			this.$get('/api/hotlist', parms).then(res => {
				console.log(res);
				if (res.data && res.data.length > 0) {
					this.listData = res.data;
				}
			});
			// this.$get('/c1VhBv83d91ed1713b509adaefdbe212c98bb09e47c7b0f/guoxuebook?responseId=888687').then(res => {
			// 	console.log(res);
			// 	if (res.list && res.list.length > 0) {
			// 		this.books = res.list;
			// 	}
			// });
		},
		change(e) {
			this.current = e.detail.current;
		},
		swiperItem(d) {
			uni.showToast({
				title: d + '',
				icon: 'none',
				duration: 2000
			});
		},
		search(d) {
			console.log(d);
		}
	}
};
</script>

<style lang="scss">
.swiper-box {
	margin: 14rpx 12rpx;
	height: 400rpx;
	border-radius: 12rpx;
	overflow: hidden;
}
.listbox {
	margin: 0 30rpx;
}
.item {
	padding: 14rpx 20rpx 16rpx;
	background: #fff;
	margin-top: 24rpx;
	border-radius: 14rpx;
	display: flex;
	.texts {
		flex: 1;
		margin-left: 18rpx;
		color: #3e3e3e;
		.name {
			height: 76rpx;
		}
		.time {
			color: #999;
			.look {
				margin-left: 40rpx;
			}
		}
	}
}
</style>
